<template>
  <KView class="bind-phone-tip">
    <KView class="bind-phone-tip-close" @click="toClose">
      <sys-svg name="close" color="#f7f7f7"></sys-svg>
    </KView>

    <KView class="bind-phone-tip-image">
      <img class="sys-img" :src="imgUrl" mode="aspectFit">
    </KView>
    <KView class="bind-phone-tip-title">请先绑定手机号码</KView>
    <KView class="bind-phone-tip-text">抱歉 , 你还未绑定手机号码</KView>
    <KView class="bind-phone-tip-text">请绑定后再来发言哦</KView>

    <KView class="bind-phone-tip-btn" @click="toBind">去绑定 &gt;</KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import SysSvg from 'common/sysSvg';

  export default {
    data() {
      return {
        imgUrl: GlobalData.images.forbidWord
      };
    },

    methods: {
      toBind(){
        this.$emit('to-bind');
      },

      toClose() {
        this.$emit('close');
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .bind-phone-tip {
    height: calc(100% - #{formatPx(60)});
    background: #ffffff;
    border-radius: 10px;
    padding: formatPx(30);
    position: relative;

    .bind-phone-tip-close {
      position: absolute;
      top: formatPx(30);
      right: formatPx(30);
      width: formatPx(18);
      height: formatPx(18);
      background: #999999;
      padding: formatPx(16);
      border-radius: 50%;
    }

    .bind-phone-tip-image {
      width: formatPx(320);
      height: formatPx(300);
      margin: auto;
    }

    .bind-phone-tip-title {
      font-size: formatPx(36);
      text-align: center;
    }

    .bind-phone-tip-text {
      font-size: formatPx(28);
      color: #474747;
      text-align: center;
    }

    .bind-phone-tip-btn {
      width: formatPx(230);
      height: formatPx(70);
      line-height: formatPx(70);
      border-radius: formatPx(35);
      background: #59c163;
      color: #ffffff;
      font-size: formatPx(30);
      text-align: center;
      margin: auto;
      margin-top: formatPx(35);
    }
  }

</style>
